<template>
  <div class="content">
    <div class="vips-top">
      <div class="tab-title">
        <Icon type="logo-android" size="20" color="#2d8cf0"/>
        <span>应用列表</span>
      </div>
      <div class="table-cont">
        <Table height="auto" :columns="columnsTb" :data="dataTb">
          <template slot-scope="{ row }" slot="name">
            <strong>{{ row.name }}</strong>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">编辑</Button>
            <Button type="error" size="small" @click="remove(index)">删除</Button>
          </template>
        </Table>
        <template>
          <div class="page-cont">
            <Page :total="tbTotal" show-elevator show-sizer show-total/>
          </div>
        </template>
      </div>
    </div>
    <div class="vips-bottom">
      <div class="tab-title">
        <Icon type="logo-android" size="20" color="#2d8cf0"/>
        <span>图形展示</span>
      </div>
      <Row>
        <Col :xs="12" :sm="12" :md="12">
          <div class="chart-cont" id="bar"></div>
        </Col>
        <Col :xs="12" :sm="12" :md="12">
          <div class="chart-cont" id="pie"></div>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
  import {getBar, getPie} from '@/utils/echarts'

  export default {
    name: '',
    props: {},
    data() {
      return {
        title: '',
        tbTotal: 3,
        columnsTb: [
          {
            title: '应用名称',
            key: 'name'
          }, {
            title: '令牌',
            key: 'auth'
          }, {
            title: '有效期',
            key: 'alive'
          }, {
            title: '积分',
            key: 'point'
          }, {
            title: '更新日期',
            key: 'update'
          }, {
            title: '操作',
            slot: 'action',
            key: 'opera'
          }
        ],
        dataTb: [
          {
            name: '搬砖笔记',
            auth: '35346453757',
            alive: '100',
            point: '100',
            update: '2020-03-15',
            list: [
              {name: 'html', path: '/apps/html'},
              {name: 'html', path: '/apps/html'}
            ]
          },
          {
            name: '小程序',
            auth: '35346453757',
            alive: '100',
            point: '100',
            update: '2020-03-15'
          },
          {
            name: '微信公众号',
            auth: '35346453757',
            alive: '100',
            point: '100',
            update: '2020-03-15'
          }
        ]
      }
    },
    methods: {
      renderBar () {
        let option = getBar({
          xAxis:['2020-01','2020-02','2020-03','2020-04','2020-05','2020-06','2020-07','2020-08','2020-09'],
          yName:'活跃用户',
          data:[{name:'搬砖笔记',data:[54,45,54,23,65,74,54,54,67]},{name:'小程序',data:[34,65,85,43,83,75,83,48,54]},{name:'微信公众号',data:[22,73,34,64,82,38,37,29,64]}]
        });
        let ec = this.$echarts.init(document.getElementById("bar"))
        ec.setOption(option,window.onresize=ec.resize());
      },
      renderPie () {
        let option = getPie({
          label:'付费百分比',
          data:[{name:'搬砖笔记',value:55},{name:'小程序',value:234},{name:'微信公众号',value:21}]
        })
        let ec = this.$echarts.init(document.getElementById("pie"))
        ec.setOption(option,window.onresize=ec.resize());
      }
    },
    created() {

    },
    mounted() {
      this.renderBar()
      this.renderPie()
      this.$bus.$emit('getSubMenu', {openName: '', activeName: ''})
    }
  }
</script>
<style scoped lang="scss">
  .content {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;

    .vips-top {

      }
      .table-cont{
        padding: 10px 5px;
      }
      .page-cont{
        padding: 10px 15px;
      }
    }

    .vips-bottom {
      height: 300px;
      .chart-cont{
        width: 100%;
        height: 255px;
      }
    }
  .tab-title{
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #565656;
    border-bottom: 1px solid #e9e6e6;
    span{
      vertical-align: 0px;
    }
  }

</style>
